<template>
    <div class="admini1">
    <el-card class="cardOut1">
      <div slot="header">
        <div class="headerTitleClass">用户列表</div>
      </div>
      <div class="fath">
        <el-form :inline="true" :model="queryName" class="demo-form-inline">
          <el-form-item label="查询工资">
            <el-input v-model="queryName.username" placeholder="请输入员工名字进行搜索"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryEmployee">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="gengxinanniu">
          <el-button type="primary"  @click="dialogFormVisible = true">点击打开新增界面</el-button>

          <el-dialog title="新增信息" :visible.sync="dialogFormVisible">
            <el-form :model="form1">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form1.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form1.sex" placeholder="请选择性别">
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电话号码" :label-width="formLabelWidth">
                <el-input v-model="form1.phone" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="form1.position" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="form1.password" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="登录身份" :label-width="formLabelWidth">
                <el-input v-model="form1.status" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel()">取消添加</el-button>
              <el-button type="primary" @click="addInfo('form1')">确定添加</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div>
        <el-table
            :data="videoList"
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="员工编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              width="180">
          </el-table-column>
          <el-table-column
              prop="username"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="position"
              label="职位">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="电话号码">
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete( scope.row)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
<!--      分页区域-->
      <div class="dibulan">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 8, 12,15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <el-dialog title="用户编辑" :visible.sync="updateFormVisible">
          <el-form :model="form">
<!--            <el-form-item label="员工编号" :label-width="formLabelWidth">-->
<!--              <el-input v-model="form.id" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-input v-model="form.sex" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
              <el-input v-model="form.position" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="updateFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateEmployee()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
    </div>
</template>

<script>
    export default {
        name: "admini1",
        data(){
            /* 定义初始化变量 */
            return{
              form1:{
                username:'',
                password:'',
                sex:'',
                phone:'',
                status:'',
                position:''
              },
            pageNum:1,
              pageSize:5,
              total: 0,
              videoList:[],
              queryName:{
                  username:''
              },
              form:{
                id:'',
                sex:'',
                username:'',
                position:'',
                phone:''
              },
              updateFormVisible:false,
              formLabelWidth:'100px',
              dialogFormVisible:false
            }
        },
        /* 定义事件函数 */

        methods:{
          cancel(){
            this.form1=[]
            this.dialogFormVisible=false
          },
          addInfo(form1){
            // this.$refs[formName].validate((valid) => {
            //   if(valid){
                this.$axios.post('/admin/add',this.form1).then(res=>{
                  if(res.data.code ===200){
                    this.$message.success("添加成功")
                    this.dialogFormVisible=false
                    this.queryEmployee()
                    this.form1=[]
                  }else{
                    this.$message.error("添加失败")
                  }
                })
              // }
              // else{
              //   this.$message.error("表单信息有误")
              // }
            // }
            // )
          },
          handleDelete(employee){
            this.$axios.delete('/admin/deleteEmployee/'+employee.id).then(res=>{
              if(res.data.code===200){
                this.$message.success("删除成功")
                this.queryEmployee()
              }
            })
          },
          updateEmployee(){

          this.$axios.post('/admin/updateEmployee',this.form).then(res=>{
            if(res.data.code===200){
              this.$message.success("修改成功")
              this.updateFormVisible=false
              // this.form=[]
              this.queryEmployee()
            }
          })
          },
          handleEdit(employee){
            this.updateFormVisible=true
            this.form={...employee}
            // this.form=employee这个是浅拷贝，编辑的值会随着修改的一起改变

          },
          handleSizeChange(val){
          this.pageSize=val
            this.queryEmployee()
          },
          handleCurrentChange(val){
          this.pageNum=val
            this.queryEmployee()
          },

          queryEmployee(){
            this.$axios.get('/admin/queryEmployee',{params:{
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                username:this.queryName.username
              }}).then(res=>{
              this.videoList = res.data.data.rows
              this.total = res.data.data.total
            })
          }
        },
        /* vue的生命周期函数
           当页面加载完毕就会执行created里面的函数
        */
        created() {
        this.queryEmployee()
        }
    }
</script>

<!-- scoped此属性可以防止当前页面的样式不会影响其他页面样式 -->
<style scoped>
@import url("Admini1.css");
</style>